<template>
    <div>
        <el-select v-model="sreach.planDate" placeholder="请选择" size="small">
            <el-option v-for="item in options1" :key="item" :label="item" :value="item">
            </el-option>
        </el-select>
        <el-select v-model="sreach.project" placeholder="请选择" size="small" filterable clearable @change="todoSearch">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
        </el-select>
        <el-button type="primary" size="small" @click="todoSearch">查询</el-button>
        <el-button type="success" size="small" @click="addPlan">发布计划</el-button>

        <div style="margin-bottom: 35px" v-for="item in tableData">
            <div class="taskTile1">
                <h3>{{ item.projectIdName }}</h3>
            </div>
            <el-table :data="item.WeekDepartmentPlan" border style="width: 100%">
                <el-table-column type="index" label="序号" width="50" align="center" fixed="left">
                </el-table-column>
                <el-table-column prop="fidName" width="100" label="部门名称" align="center">
                </el-table-column>
                <el-table-column prop="developsAttribute" width="60" label="属性" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.developsAttribute == 1">研发</span>
                        <span v-if="scope.row.developsAttribute == 2">管理</span>
                    </template>
                </el-table-column>
                <el-table-column prop="weekPlanMsg" label="工作计划" width="300" header-align="center">
                </el-table-column>
                <el-table-column label="备注" width="100" align="center" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.planRemark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.planRemark == null && scope.row.reviewState == 0" type="success"
                            size="small" @click="addPlanRemarks(scope.row.id)">添加备注</el-button>
                        <el-button v-if="scope.row.planRemark != null && scope.row.reviewState == 0" size="small"
                            @click="editPlanRemarks(scope.row)">修改备注</el-button>
                        <el-button v-if="scope.row.reviewState == 0 && scope.row.reviewState == 0" size="small"
                            @click="handleEdit(scope.row)">修改计划</el-button>
                        <el-button v-if="scope.row.weekSummaryMsg == null && scope.row.reviewState == 0" size="small"
                            @click="deleteDep(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="weekSummaryMsg" label="工作总结" width="300" header-align="center">
                </el-table-column>
                <el-table-column label="备注" width="100" align="center">
                    <template slot-scope="scope">
                        <!-- <el-button v-if="scope.row.summaryRemark == null && scope.row.fid == fid" type="success"
                            size="small" @click="addSummaryRemark(scope.row.id)">添加</el-button> -->
                        <span>{{ scope.row.summaryRemark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="80" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.reviewState == 1 ">已确认</span>
                        <span v-if="scope.row.reviewState == 0 && scope.row.weekSummaryMsg != null">未确认</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.summaryRemark == null && scope.row.reviewState == 0" type="success"
                            size="small" @click="addSummaryRemark(scope.row.id)">添加备注</el-button>
                        <el-button v-if="scope.row.summaryRemark != null && scope.row.reviewState == 0" size="small"
                            @click="editSummaryRemark(scope.row)">修改备注</el-button>
                        <el-button
                            v-if="scope.row.confirmShowFlag == 1 && scope.row.reviewState == 0 && scope.row.weekSummaryMsg != null"
                            size="small" @click="handleEditSummary(scope.row)">确认</el-button>
                        <el-button
                            v-if="scope.row.confirmShowFlag == 1 && scope.row.reviewState == 1 && scope.row.weekSummaryMsg != null"
                            size="small" @click="handleEditSummary(scope.row)">取消确认</el-button>
                        <el-button
                            v-if="scope.row.summaryFlag == 1 && scope.row.reviewState == 0 && scope.row.weekSummaryMsg == null && scope.row.reviewState == 0"
                            size="small" @click="handleSummary(scope.row)">工作总结</el-button>
                        <el-button v-if="scope.row.weekSummaryMsg != null && scope.row.reviewState == 0" size="small"
                            @click="editHandleSummary(scope.row)">修改总结</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="title" :visible.sync="dialogAddPlan" center width="40%" :close-on-click-modal="false">
            <el-form :model="form" ref="workPlanRef">
                <div v-if="this.category == 'add'">
                    <el-form-item label="计划日期:" :label-width="formLabelWidth" prop="weekPartStr" :rules="{
                        required: true,
                        message: '计划时间不能为空',
                        trigger: 'change',
                    }">
                        <el-select v-model="form.weekPartStr" placeholder="请选择" style="width: 70%">
                            <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="计划属性:" :label-width="formLabelWidth" prop="developsAttribute" :rules="{
                        required: true,
                        message: '计划属性不能为空',
                        trigger: 'change',
                    }">
                        <el-select v-model="form.developsAttribute" placeholder="请选择" style="width: 70%">
                            <el-option label="研发" :value="1"></el-option>
                            <el-option label="管理" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-for="(item, i) of form.planList" :key="i">
                        <el-form-item label="项目名称:" :label-width="formLabelWidth" :prop="`planList[${i}].projectId`" :rules="{
                            required: true,
                            message: '请选择项目',
                            trigger: 'change',
                        }">
                            <el-select v-model="item.projectId" clearable placeholder="请选择项目" filterable style="width: 70%">
                                <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-top: 20px;" label="计划内容:" :label-width="formLabelWidth"
                            :prop="'planList.' + i + '.weekPlanMsg'" :rules="{
                                required: true,
                                message: '计划内容不能为空',
                                trigger: 'blur',
                            }">
                            <el-input placeholder="请输入计划内容" type="textarea" v-model="item.weekPlanMsg"
                                style="width: 70%"></el-input>
                            <el-button icon="el-icon-minus" circle @click="dele(item)"></el-button>
                        </el-form-item>
                    </el-form-item>
                </div>
                <div v-if="this.category == 'update'">
                    <el-form-item label="计划日期:" :label-width="formLabelWidth">
                        <el-select v-model="weekDeptTimeUpdate" placeholder="请选择" style="width: 70%">
                            <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目名称:" :label-width="formLabelWidth">
                        <el-select v-model="projectId" clearable @change="projectGroup" placeholder="请选择项目"
                            style="width: 70%">
                            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="计划内容:" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="weekPlanMsg" style="width: 70%"></el-input>
                    </el-form-item>
                </div>
                <div class="btn-input-emp" v-if="this.category == 'add'">
                    <el-button icon="el-icon-plus" circle @click="add()"></el-button>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button :loading="loading" type="primary" @click="submitPlan('workPlanRef')"
                    v-show="this.category == 'add'">确
                    定</el-button>
                <el-button :loading="loading" type="primary" @click="updatePlan()" v-show="this.category == 'update'">确
                    定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="remarkTitle" :visible.sync="dialogRemark" center width="40%" :close-on-click-modal="false">
            <el-form :model="reForm" ref="reFormRef" :rules="reRules">
                <div v-if="this.category == 'add'">
                    <el-form-item label="内容:" label-width="100px" prop="remark">
                        <el-input type="textarea" v-model="reForm.remark" style="width: 100%"></el-input>
                    </el-form-item>
                </div>
                <div v-if="this.category == 'update'">
                    <el-form-item label="内容:" label-width="100px">
                        <el-input type="textarea" v-model="remark" style="width: 100%"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelRemark('reFormRef')">取 消</el-button>
                <el-button type="primary" @click="submitRemark('reFormRef')" v-show="this.category == 'add'">确 定</el-button>
                <el-button type="primary" @click="updateRemark('reFormRef')" v-show="this.category == 'update'">确
                    定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    companyPlan, addWeekDepartmentPlan, weekdepartmentplan, editWeekDepartmentPlan, deleteWeekDepartmentPlan
} from "@/service/Api.js"; //接口
import {
    getProjectList
} from "@/service/taskApi.js"; //接口
export default {
    data() {
        return {
            fid: '',
            id: "",
            loading: false,
            sreach: {
                planDate: '',
                project: ''
            },
            options: [],
            options1: [],
            tableData: [],
            title: '',
            remarkTitle: '',
            category: "",
            formLabelWidth: "100px",
            dialogAddPlan: false,
            remark: "",
            form: {
                weekPartStr: "",
                developsAttribute: "",
                planList: [
                    {
                        projectId: "",
                        weekPlanMsg: ""
                    },
                ],
            },
            projectList: [],
            weekDeptTimeUpdate: "",
            weekPlanMsg: "",
            weekSummaryMsg: "",
            summaryRemark: "",
            projectId: "",
            dialogRemark: false,
            reForm: {
                remark: "",
                id: ""
            },
            reRules: {
                remark: [
                    { required: true, message: '请填写备注内容', trigger: 'blur' }
                ]
            },
            planid: '',
            remarkType: 0,//0 填写计划备注  1 填写总结备注  2 填写总结
        }
    },
    created() {
        this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.fid = this.userInfo.fid;
        this.getDate(0)
        this.getProject()
    },
    methods: {
        getTableList() {
            let data = {
                weekPartStr: this.sreach.planDate,
                projectId: this.sreach.project
            }
            weekdepartmentplan(data).then(res => {
                if (res.code == 0) {
                    this.tableData = res.data
                }
            })
        },
        getDate(val) {
            companyPlan(val).then((res) => {
                if (res.code == 0) {
                    if (val == 0) {
                        this.options1 = res.data;
                        this.sreach.planDate = res.data[3];
                        this.options.unshift("全部");
                        this.getTableList();
                    } else {
                        this.options = res.data;
                        this.form.weekPartStr = res.data[0];
                    }
                }
            });
        },
        getProject() {
            getProjectList().then(res => {
                if (res.code == 0) {
                    this.projectList = res.data
                }
            })
        },
        addPlan() {
            this.title = "发布计划"
            this.category = "add"
            this.getDate(1)
            this.dialogAddPlan = !this.dialogAddPlan
        },
        handleEdit(row) {
            this.category = "update"
            this.title = "修改计划"
            this.getDate(1)
            this.planid = row.id
            this.projectId = row.projectId
            this.weekDeptTimeUpdate = row.weekPartStr
            this.weekPlanMsg = row.weekPlanMsg
            this.dialogAddPlan = !this.dialogAddPlan
        },
        editPlanRemarks(row) {
            console.log(row);
            this.category = "update";
            this.remarkType = 0
            this.remarkTitle = '修改工作计划备注'
            this.planid = row.id
            this.remark = row.planRemark
            this.dialogRemark = !this.dialogRemark
        },
        addPlanRemarks(val) {
            this.category = "add";
            this.remarkType = 0
            this.remarkTitle = '填写工作计划备注'
            this.planid = val
            this.dialogRemark = !this.dialogRemark
        },

        addSummaryRemark(val) {
            this.category = "add";
            this.remarkType = 1
            this.remarkTitle = '填写工作总结备注'
            this.planid = val
            this.dialogRemark = !this.dialogRemark
        },
        editSummaryRemark(row) {
            this.category = "update";
            this.remarkType = 1
            this.remarkTitle = '修改工作总结备注'
            this.remark = row.summaryRemark
            this.planid = row.id
            this.dialogRemark = !this.dialogRemark
        },
        deleteDep(row) {
            this.$confirm("确定要删除计划?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true,
            })
                .then(() => {
                    deleteWeekDepartmentPlan(row.id).then((res) => {
                        console.log(res);
                        if (res.code == 0) {
                            this.$message.success("删除成功!");
                            this.getTableList()
                        }
                    });
                })
                .catch(() => { });
        },
        handleEditSummary(val) {
            let s
            if (val.reviewState == 0) {
                s = 1
            } else {
                s = 0
            }
            let data = {
                id: val.id,
                reviewState: s
            }
            editWeekDepartmentPlan(data).then(res => {
                if (res.code == 0) {
                    this.getTableList()
                    return
                }
            })
        },
        handleSummary(val) {
            this.category = "add";
            this.remarkType = 2
            this.remarkTitle = '填写总结'
            this.planid = val.id
            this.dialogRemark = !this.dialogRemark
        },
        editHandleSummary(val) {
            this.category = "update";
            this.remarkType = 2
            this.remarkTitle = '修改总结'
            this.planid = val.id
            this.remark = val.weekSummaryMsg
            this.dialogRemark = !this.dialogRemark
        },

        cancelRemark() {
            this.reForm = {}
            this.$nextTick(() => {
                this.$refs.reFormRef.clearValidate();
            });
            this.dialogRemark = !this.dialogRemark
        },
        //添加备注
        submitRemark(reFormRef) {
            this.$refs[reFormRef].validate((valid) => {
                if (valid) {
                    let data
                    if (this.remarkType == 0) {
                        data = {
                            id: this.planid,
                            planRemark: this.reForm.remark//计划备注
                        }
                    } else if (this.remarkType == 1) {
                        data = {
                            id: this.planid,
                            summaryRemark: this.reForm.remark//总结备注
                        }
                    } else {
                        data = {
                            id: this.planid,
                            weekSummaryMsg: this.reForm.remark//项目周总结
                        }
                    }
                    editWeekDepartmentPlan(data).then(res => {
                        if (res.code == 0) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.cancelRemark()
                            this.getTableList()
                        }
                    })
                } else {
                    return false
                }
            })
        },
        //修改备注
        updateRemark(reFormRef) {
            this.$refs[reFormRef].validate((valid) => {
                if (valid) {
                    let data
                    if (this.remarkType == 0) {
                        data = {
                            id: this.planid,
                            planRemark: this.remark
                        }
                    } else if (this.remarkType == 1) {
                        data = {
                            id: this.planid,
                            summaryRemark: this.remark
                        }
                    } else {
                        data = {
                            id: this.planid,
                            weekSummaryMsg: this.remark
                        }
                    }
                    editWeekDepartmentPlan(data).then(res => {
                        if (res.code == 0) {
                            this.$message({
                                message: '备注成功',
                                type: 'success'
                            });
                            this.cancelRemark()
                            this.getTableList()
                        }
                    })
                } else {
                    return false
                }
            })
        },
        todoSearch() {
            this.getTableList()
        },

        projectGroup() {

        },
        dele(item) {
            if (this.form.planList.length === 1) {
                this.$message({
                    message: "至少一条计划",
                    type: "warning",
                });
            } else {
                var index = this.form.planList.indexOf(item);
                if (index !== -1) {
                    this.form.planList.splice(index, 1);
                }
            }
        },
        add() {
            this.form.planList.push(
                //增加就push进数组一个新值
                {
                    projectId: "",
                    weekPlanMsg: "",
                }
            );
        },
        //添加计划
        submitPlan(workPlanRef) {
            this.loading = true
            this.$refs[workPlanRef].validate((valid) => {
                if (valid) {
                    let data = {
                        weekPartStr: this.form.weekPartStr,
                        developsAttribute: this.form.developsAttribute,
                        planList: this.form.planList
                    }
                    addWeekDepartmentPlan(data).then(res => {
                        if (res.code == 0) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.loading = false
                            this.cancel()
                            this.getTableList()
                        } else {
                            this.$message({
                                message: res.message,
                                type: 'warning'
                            });
                            this.loading = false
                        }
                    })
                } else {
                    this.loading = false
                }
            })
        },
        //修改计划
        updatePlan() {
            this.loading = true
            let data = {
                id: this.planid,
                projectId: this.projectId,
                weekPlanMsg: this.weekPlanMsg,
                weekPartStr: this.weekDeptTimeUpdate
            }
            editWeekDepartmentPlan(data).then(res => {
                if (res.code == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.loading = false
                    this.cancel()
                    this.getTableList()
                }
            })
        },
        cancel() {
            this.form.developsAttribute = ''
            this.form.planList = [{ projectId: "", weekPlanMsg: "" }];
            this.$nextTick(() => {
                this.$refs.workPlanRef.clearValidate();
            });
            this.dialogAddPlan = !this.dialogAddPlan
        }
    }
}
</script>
<style scoped lang='scss'>
.taskTile1 {
    // display: flex;
    text-align: center;
    margin: 10px 0px 0px 0px;
    padding: 0 10px;
    border: 1px solid #e8eef5;
    background: #f9f9f9;
    border-bottom: 0px;
    height: 50px;

    h3 {
        line-height: 50px;
        margin-right: 15px;
        font-size: 24px;
    }
}
</style>